<script setup lang="ts">
import { nextTick, ref , watch} from 'vue'
import { useMusicStore } from '@/store/listMusic'
const showLeft = ref()
// 关遮罩
const closeDrawer = () => {
  showLeft.value.close()
}
//打开遮罩
const open = () => {
  showLeft.value.open()
}
// 将方法暴露出去，以便父组件调用
defineExpose({
  open
})

//使用pinia中的参数
const musicState = useMusicStore()
let user = musicState.userInfo
// watch(
//   user,
//   (userB,userA)=>{
//     user = userA
//   },
//   {
//     deep:true,
//     immediate: true
//   }
// )
// nextTick(()=>{
//   user = musicState.userInfo
// })
// )
// console.log(musicState.userInfo)
</script>

<template>
  <uni-drawer ref="showLeft" mode="left" :width="320">
    <view v-if="useMusicStore().userStatusType">
      <!-- <image :src="musicState.userInfo?.profile.avatarUrl"></image>
      <view>{{musicState.userInfo?.profile.nickname}}</view> -->
      
      <image :src="musicState.userInfo?.profile.avatarUrl"></image>
      <view>{{musicState.userInfo?.profile.nickname}}</view>
    </view>
    <view v-else>
      <navigator url="/pages/mine/mine" open-type="switchTab" @click="closeDrawer()">
        去登陆
      </navigator>
    </view>
  </uni-drawer>
</template>

<style scoped lang="scss">
</style>